<template>
  <div id="star" class="">
    <transition name="blink">
      <!-- 闪烁的点 -->
      <div v-if="show" id="point" class="blink-node" :style="positionStyle"></div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Star',
  props: {
    // 父类传递的随机滞后时间
    // lag值为2000(2秒)以内
    lag: Number,
    // 父类传递的序号
    seq: Number,
  },
  data: function() {
    return {
      // opacity的展示
      show: false,
      // 星星位置 由父类传递的序号决定
      positionStyle: {
        // 6 (%) Top为起始间距
        // 6 (%) 两边间距
        // 12 (%) 行区域宽度
        // 25 (%) 列区域宽度
        // 4为除数的商将16颗星分为4个横向的行区域
        marginTop: 6 + (parseInt(this.seq) / 4) * 20 + Math.random() * 12 + '%',
        // 4为除数的余数将16颗星分为4个纵向的列区域
        marginLeft: 6 + ((parseInt(this.seq) - 1) % 4) * 22 + Math.random() * 22 + '%',
      },
    }
  },
  created: function() {
    setTimeout(
      function() {
        this.init()
      }.bind(this),
      10
    )
  },

  methods: {
    /**
     * Async Init
     * 数据初始化
     *
     * @return void
     */
    async init() {
      // console.log(6 + (parseInt(this.seq) / 4) * 20 + Math.random() * 12 + '%')
      // console.log(6 + ((parseInt(this.seq) - 1) % 4) * 22 + Math.random() * 22 + '%')
      setTimeout(
        function() {
          setInterval(() => {
            this.show = !this.show
          }, Math.random() * 3000 + 1010)
        }.bind(this),
        parseInt(this.lag)
      )
    },
  },
}
</script>

<style scoped media="screen" lang="less">
/* 闪烁动画 */
.blink-node {
  position: absolute;
  background-color: #f0f0f0;
  border-radius: 0.02rem;
  width: 0rem;
  height: 0rem;
  box-shadow: 0.1rem 0.1rem 0.1rem 0.1rem #f0f0f0;
}
.blink-enter {
  opacity: 0;
}
.blink-leave-to {
  opacity: 0;
}
.blink-enter-to {
  opacity: 1;
}
.blink-leave {
  opacity: 1;
}
.blink-enter-active {
  transition: all 1.5s;
}
.blink-leave-active {
  transition: all 1.5s;
}
</style>
